<template>
  <el-dialog
    ref="refDlg"
    title="新增"
    :visible.sync="dialogShow"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :before-close="clearForm"
    width="440px"
    @close="closeDialog"
  >
    <div>
      <el-form
        ref="refForm"
        :rules="formRules"
        :model="formData"
        size="mini"
        label-width="100px"
      >
        <el-row>
          <el-col :span="18">
            <el-form-item label="附件类型:" prop="attachmentTypeId">
              <el-select
                v-model="formData.attachmentTypeId"
                placeholder="请选择"
                style="width: 100%"
                @focus="getAttachmentType"
                @change="changeType"
              >
                <el-option
                  v-for="item in attTypeOptions"
                  :key="item.id"
                  :label="item.attachmentType"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <file-uploader
        :limit="20"
        :data="formData.fileList"
        :file-type="fileTypeName"
        @remove="removeFile"
        @upload-success="uploadSuccessFile"
      />
    </div>
    <div slot="footer">
      <el-button size="mini" @click="closeDialog">取消</el-button>
      <el-button size="mini" type="primary" @click="submitForm">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import fileUploader from '@/components/importFile'
import { postConfigAttachmentTemplate } from '@/api/proConfig'
export default {
  name: 'FileAddForm',
  components: { fileUploader },
  props: {
    visible: {
      type: Boolean,
      default: false,
      required: true
    }
  },
  data() {
    return {
      fileTypeName: '',
      attTypeOptions: [], // 附件类型
      formData: { fileList: [], attachmentTypeId: '', attachmentType: '' },
      formRules: {
        attachmentTypeId: [
          { required: true, message: '请选择附件类型', trigger: 'change' }
        ]
      }
    }
  },

  computed: {
    dialogShow: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  created() {
  },
  methods: {
    // 获取附件类型attachmentType下拉选项
    getAttachmentType() {
      postConfigAttachmentTemplate('SHOP_DESIGN').then(res => {
        if (res.success === 1) {
        // 根据modelId获取每个配置id
          this.attTypeOptions = res.data.records
        }
      })
    },
    // 选择附件类型
    changeType(value) {
      this.attTypeOptions.forEach(item => {
        if (item.id === value) {
          this.fileTypeName = item.fileTypeName
        }
      })
    },
    // 删除文件
    removeFile(data) {
      this.formData.fileList = data.list
    },
    // 文件上传成功
    uploadSuccessFile(data) {
      this.formData.fileList = data.list
    },
    closeDialog() {
      this.dialogShow = false
      this.clearForm()
    },
    clearForm(done) {
      this.formData = {}
      this.$refs.refForm && this.$refs.refForm.clearValidate()
      done && done()
    },
    // 提交表单处理
    submitForm() {
      this.$refs['refForm'].validate((valid) => {
        if (valid) {
          if (this.formData.fileList.length === 0) {
            this.$message.warning('请上传文件')
            return
          }
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          const arrTemp = this.attTypeOptions.filter(row => row.id === this.formData.attachmentTypeId)
          this.formData.fileList.forEach(el => {
            el.configAttachmentId = this.formData.attachmentTypeId
            el.attachmentType = arrTemp[0].attachmentType
          })
          this.$emit('success', this.formData.fileList)
          this.closeDialog()
        }
      })
    }
  }
}
</script>
<style lang='scss' scoped>
.img-upload-container {
  width: fit-content;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  .icon-msg{
    margin-left: 10px;
    color: #999;
  }
}
</style>
